<template>
  <div class="region">
    <Search @sendInfo="receiveInfo" :searchTitle="'区域搜索:'" />
    <div class="list">
      <el-row>
        <el-col :span="4"
          ><el-button icon="iconfont icon-jiahao" type="warning" @click="newCreate"
            >新建</el-button
          ></el-col
        >
      </el-row>
      <el-table
        ref="singleTable"
        :data="regionInfo.currentPageRecords"
        highlight-current-row
        center
        style="width: 100%"
      >
        <el-table-column align="center" label="序号" width="150" type="index" height="45">
        </el-table-column>
        <el-table-column align="center" property="name" label="区域名称" >
        </el-table-column>
        <el-table-column align="center" property="nodeCount" label="点位数" >
        </el-table-column>
        <el-table-column
          align="center"
          property="remark"
          label="备注说明"
        ></el-table-column>
        <el-table-column align="center" label="操作" width="500">
          <template slot-scope="{ row }">
            <el-button type="info" icon="el-icon-search" size="mini" @click.native="seeDetails(row)"
              >查看详情</el-button
            >
            <el-button size="mini" type="primary" icon="el-icon-edit" @click.native="aditInfo(row)"
              >修改</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click.native="deleteInfo(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :searchTaskList="regionInfo"
        @currentSizeChange="(value) => (regionInfoParams.pageSize = value)"
        @currentPageChange="(value) => (regionInfoParams.pageIndex = value)"
      />
    </div>
    <!-- 区域详情 -->
    <Dialog :dialogVisibleInfo="dialogVisibleDetial">
      <template #body>
        <el-row style="height: 40px">
          <el-col :span="4">区域名称:</el-col>
          <el-col :span="18">{{ areaName }}</el-col>
        </el-row>
      </template>
      <template #footer>
        <el-row>
          <el-col :span="4">包含点位:</el-col>
          <el-col :span="18">
            <el-table
              ref="singleTable"
              :data="detailsList"
              highlight-current-row
              center
              style="width: 100%"
            >
              <el-table-column align="center" label="序号" type="index" width="60" height="45">
              </el-table-column>
              <el-table-column align="center" property="name" label="点位名称"> </el-table-column>
              <el-table-column align="center" property="vmCount" label="设备数量">
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </template>
    </Dialog>
    <!-- 修改区域 -->
    <Dialog :dialogVisibleInfo="dialogVisibleEdit" @dialogClose="dialogEditClose">
      <template #body>
        <el-form
          :model="ruleFormEdit"
          :rules="rulesEdit"
          ref="ruleFormEdit"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="区域名称" prop="regionName">
            <el-input v-model="ruleFormEdit.regionName"></el-input>
          </el-form-item>
          <el-form-item label="备注说明" prop="remark">
            <el-input type="textarea" v-model="ruleFormEdit.remark"></el-input>
          </el-form-item>
          <el-form-item class="confirm">
            <el-button type="primary" @click="submitForm">确认</el-button>
            <el-button @click="dialogVisibleEdit.dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </template>
    </Dialog>
  </div>
</template>

<script>
import { regionSearchAPI, nodeSearchAPI, regionEditAPI, regionNewCreateAPI } from '@/api'
export default {
  name: 'Region',
  data() {
    return {
      // 区域弹窗
      dialogVisibleDetial: {
        dialogTitle: '区域详情',
        dialogVisible: false,
        dialogWidth: '30%'
      },
      // 修改区域的弹窗
      dialogVisibleEdit: {
        dialogTitle: '新建区域',
        dialogVisible: false,
        dialogWidth: '30%'
      },
      // 修改区域的参数
      ruleFormEdit: {
        regionName: '',
        remark: ''
      },
      // 校验规则
      rulesEdit: {
        regionName: [{ required: true, message: '请输入区域名称', trigger: 'blur' }],
        remark: [{ required: true, message: '备注说明不能为空', trigger: 'blur' }]
      },
      // 获取区域数据的参数
      regionInfoParams: {
        pageIndex: 1,
        pageSize: 10
      },
      // 搜索框的数据
      searchInfo: '',
      // 渲染区域列表的数据,
      regionInfo: {
        currentPageRecords: []
      },
      // 详情数据列表
      detailsList: [],
      // 弹窗的区域名称
      areaName: '',
      // 区域id
      regionId: ''
    }
  },
  created() {
    this.fecthRegionList({ ...this.regionInfoParams })
  },
  methods: {
    async fecthRegionList(data) {
      try {
        const res = await regionSearchAPI(data)
        this.regionInfo = res.data
        // console.log(res.data)
        return Promise.resolve(res)
      } catch (error) {
        return Promise.reject(error)
      }
    },
    // 搜索框事件
    receiveInfo(value) {
      if (this.searchInfo !== value) {
        this.searchInfo = value
        this.regionInfoParams.pageIndex = 1
        this.fecthRegionList({ ...this.regionInfoParams, name: this.searchInfo })
      }
    },
    // 查看详情
    async seeDetails(value) {
      this.areaName = value.name
      this.dialogVisibleDetial.dialogVisible = true
      const res = await nodeSearchAPI({
        ...this.regionInfoParams,
        regionId: value.id
        // 不能带name
      })
      this.detailsList = res.data.currentPageRecords
    },
    // 编辑
    aditInfo(value) {
      this.ruleFormEdit.regionName = value.name
      this.ruleFormEdit.remark = value.remark
      this.regionId = value.id
      this.dialogVisibleEdit.dialogTitle = '修改区域'
      this.dialogVisibleEdit.dialogVisible = true
    },
    // 编辑功能的表单确认
    submitForm() {
      this.$refs.ruleFormEdit.validate(async (valid) => {
        if (!valid) {
          return this.$message({
            type: 'warning',
            message: '内容不能为空',
            offset: 75
          })
        }
        if (this.regionId) {
          try {
            await regionEditAPI({ ...this.ruleFormEdit, id: this.regionId })
            this.$message({
              type: 'success',
              message: '修改成功',
              offset: 75
            })
            // 清空id
            this.regionId = ''
            this.fecthRegionList({ ...this.regionInfoParams, name: this.searchInfo })
          } catch (error) {
            return Promise.reject(error)
          }
        } else {
          try {
            await regionNewCreateAPI(this.ruleFormEdit)
            this.$message({
              type: 'success',
              message: '新增成功',
              offset: 75
            })
            this.fecthRegionList({ ...this.regionInfoParams, name: this.searchInfo })
          } catch (error) {
            this.$message({
              type: 'error',
              message: `${error.response.data}`,
              offset: 75
            })
            return Promise.reject(error)
          }
        }
        // 清空
        this.ruleFormEdit = {
          regionName: '',
          remark: ''
        }
        this.dialogVisibleEdit.dialogVisible = false
      })
    },
    // 新增
    newCreate() {
      this.dialogVisibleEdit.dialogTitle = '新建区域'
      this.dialogVisibleEdit.dialogVisible = true
    },
    // 关闭编辑页面的表单置空
    dialogEditClose() {
      this.$refs.ruleFormEdit.resetFields()
    },
    // 删除提示
    deleteInfo() {
      this.$notify({
        title: '提示',
        message: '演示系统，不支持此操作',
        type: 'warning',
        offset: 80,
        duration: 2000
      })
    }
  },
  watch: {
    regionInfoParams: {
      handler() {
        this.fecthRegionList({ ...this.regionInfoParams, name: this.searchInfo })
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  padding: 20px 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 10px rgb(240, 239, 239);
  .el-col {
    margin-bottom: 20px;
  }
  /deep/.el-table th.el-table__cell {
    background-color: rgb(243, 246, 251);
  }
  /deep/tr.el-table__row {
    height: 45px !important;
  }

  /deep/.el-table td.el-table__cell {
    border: none;
    height: 0px;
    padding: 0;
    .el-button {
      height: 30px;
      line-height: 1px;
      margin: 10px 0 10px 10px;
      width: 80px;
    }
    .el-button--info {
      width: 100px;
    }
  }
  /deep/.el-table th.el-table__cell.is-leaf {
    border: none;
  }
  /deep/.el-button--warning {
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    text-align: center;
    .icon-jiahao:before {
      content: '\e726';
      margin-right: 5px;
    }
  }
  /deep/.el-button--info {
    background-color: #fbf4f0 !important;
    border: none;
    color: #333;
  }
  /deep/.el-table::before {
    height: 0;
  }
}
   .confirm{
    width: 100%;
    padding-left: 20%;
    /deep/.el-button--primary{
     background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
     border: none;
    }
  }
</style>
